<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品列表</title>

    <link rel="stylesheet" href="/node_modules/layui/dist/css/layui.css" />
    <link rel="stylesheet" href="/node_modules/datatables.net-dt/css/jquery.dataTables.min.css" />

    <script type="text/javascript" src="/node_modules/layui/dist/layui.js"></script>
    <script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="/js/config.js"></script>
</head>

<body style="padding: 10px;">
    <table id="productlist" class="display compact hover" style="width:100%;">
        <thead>
            <tr>
                <th>ID</th>
                <th>品名</th>
                <th>库存</th>
                <th>单价</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>
    <script>
        $(document).ready(() => {
            let myOp = new productListOperation()
            myOp.bindProductList("#productlist")

            $("#productlist").on("click", ".js-btn-input", function() {
                let button = $(this)
                let id = $(button).attr('id')
                
                layer.open({
                    type: 2,
                    title: "产品输入",
                    shadeClose: false,
                    shade: 0.4,
                    maxmin: false,
                    area: ['600px', '320px'],
                    content: "./productinputjava.html"
                })
            })

            $("#productlist").on("click", ".js-btn-update", function() {
                let button = $(this)
                let id = $(button).attr('id')
                
                layer.open({
                    type: 2,
                    title: "更新产品信息（id = " + id + "）",
                    shadeClose: false,
                    shade: 0.4,
                    maxmin: false,
                    area: ['600px', '320px'],
                    content: "./updatejava.html?id=" + id
                })
            })

            $("#productlist").on("click", ".js-btn-del", function() {
                let button = $(this)
                let id = $(button).attr("id")

                layer.confirm("确实要删除该记录吗？id = " + id,{
                    btn: ["是", "否"]
                },
                function() {
                    // yes
                    let myUrl = apiurl + "/api/products"
                    let formData = new FormData()
                    formData.append("productId", id)

                    $.ajax({
                        url: myUrl,
                        type: "DELETE",
                        data: formData,
                        processData: false,
                        contentType: false
                    }).
                    done(function (res) {
                        debugger
                        let refreshUrl = apiurl + "/api/products"
                        myOp.refreshTable("#productlist", refreshUrl)
                        layer.msg("删除操作成功 " + res.rowCount + " 行被删除！", {icon: 0})
                    }).
                    fail(function (res) {
                        layer.msg("删除操作失败", {icon: 0})
                    })
                },
                function() {
                    // no
                })
            })
        })

        function productListOperation() {
            this.bindProductList = function (tableid) {
                let myUrl = apiurl + "/api/products"

                $.ajax({
                    type: "GET",
                    url: myUrl,
                    dataType: "json",
                    success: function (myData) {
                        if ($.fn.DataTable.isDataTable(tableid) == false) {
                            $(tableid).dataTable({
                                "aaData": myData,
                                "aoColumns": [
                                    {
                                        "mData": "productId",
                                        "width": 40
                                    },
                                    {
                                        "mData": "name"
                                    },
                                    {
                                        "mData": "quantityInStock",
                                        "width": 40
                                    },
                                    {
                                        "mData": "unitPrice",
                                        "width": 40
                                    },
                                    {
                                        "mData": "productId",
                                        "render": function (data, type, row, meta) {
                                            if (type === "display") {
                                                data = "<button class='js-btn-del layui-btn layui-btn-xs' id='" + data + "'>删除</button>" + 
                                                    "<button class='js-btn-update layui-btn layui-btn-xs' id='" + data + "'>更新</button>" +
                                                    "<button class='js-btn-input layui-btn layui-btn-xs' id='" + data + "'>输入</button>"
                                            }
                                            return data;
                                        },
                                        "width": 120
                                    }
                                ],
                                "language": {
                                    url: "/js/Chinese.json"
                                },
                                "bPaginate": true,
                                "bInfo": true,
                                "filter": true,
                                'columnDefs': [
                                    {
                                        'targets': 0,
                                        'className': 'dt-body-center'
                                    },
                                    {
                                        'targets': 2,
                                        'searchable': false,
                                        'orderable': true,
                                        'className': 'dt-body-right'
                                    },
                                    {
                                        'targets': 3,
                                        'searchable': false,
                                        'orderable': true,
                                        'className': 'dt-body-right'
                                    },
                                    {
                                        'targets': 4,
                                        'searchable': false,
                                        'orderable': false,
                                        'className': 'dt-body-center'
                                    }
                                ]

                            })
                        }
                        else {
                            this.refreshTable(tableid, myUrl);
                        }
                    }
                }).
                    done(function () {
                        // bind table finished.
                    }).
                    fail(function () {
                        // bind table failed.
                    }, 2000);
            }

            this.refreshTable = function (tableid, url) {
                $.getJSON(url, null, function (json) {
                    table = $(tableid).dataTable();
                    oSettings = table.fnSettings();

                    table.fnClearTable(this);

                    var myTable = $(tableid).DataTable();
                    myTable.clear().rows.add(json).draw();
                });
            }

        }
    </script>
</body>

</html>